@charset "utf-8";

.index-DTY-clothstyle{
    position: relative;
    height: 100%;
     animation:flicker-5 8s linear infinite both;
    img{
        position: absolute;
//      width: 100%;
    }
    p:first-of-type{
        position: absolute;
//      font-family: "宋体";
        font-size: 35px;
        line-height: 35px;
        top: 46px;
        left: 23px;
        color: #FFFFFF;
    }
    div{
        position: absolute;
        width: 147px;
        height: 83px;
        left: 23px;
        top: 114px;
        li{
            box-sizing: border-box;
            width: 71px;
            height: 17px;
            font-size: 12px;
            line-height: 17px;
            color: #FFFFFF;
            padding-left: 5px;
            background: rgba(255,255,255,0.2);
            margin-bottom: 5px;
            transition: 0.3s;
        }
        a:last-child li{
            margin-bottom: 0;
        }
        li:hover{
            color: #eb413d;
        }
    }
}


@keyframes flicker-5{
    0%,100%{opacity:1}
    0%{opacity:1}
    1%{opacity:1}
    1.02%{opacity:1}
    8.98%{opacity:1}
    9%{opacity:0}
    9.8%{opacity:0}
    9.82%{opacity:1}
    9.48%{opacity:1}
    9.5%{opacity:1}
    9.6%{opacity:1}
    9.62%{opacity:1}
    14.98%{opacity:1}15%{opacity:.5}15.8%{opacity:.5}15.82%{opacity:1}15.18%{opacity:1}15.2%{opacity:.7}16%{opacity:.7}16.02%{opacity:1}15.48%{opacity:1}15.5%{opacity:.5}16.2%{opacity:.5}16.22%{opacity:1}16.98%{opacity:1}
    17%{opacity:1}17.8%{opacity:1}17.82%{opacity:1}20.48%{opacity:1}20.5%{opacity:.9}21.3%{opacity:.9}21.32%{opacity:1}20.98%{opacity:1}21%{opacity:1}22%{opacity:1}22.02%{opacity:1}39.98%{opacity:1}40%{opacity:1}41%{opacity:1}
    41.02%{opacity:1}40.48%{opacity:1}40.5%{opacity:.6}41.4%{opacity:.6}41.42%{opacity:1}41.98%{opacity:1}42%{opacity:1}42.8%{opacity:1}42.82%{opacity:1}59.98%{opacity:1}60%{opacity:1}61%{opacity:1}61.02%{opacity:1}60.18%{opacity:1}60.2%{opacity:.2}
    61%{opacity:.2}61.02%{opacity:1}60.78%{opacity:1}60.8%{opacity:.4}61.6%{opacity:.4}61.62%{opacity:1}61.38%{opacity:1}61.4%{opacity:0}62.2%{opacity:0}62.22%{opacity:1}61.78%{opacity:1}61.8%{opacity:1}62.8%{opacity:1}62.82%{opacity:1}75.98%{opacity:1}76%{opacity:1}77%{opacity:1}77.02%{opacity:1}
    77.98%{opacity:1}78%{opacity:.7}78.8%{opacity:.7}78.82%{opacity:1}78.98%{opacity:1}79%{opacity:1}80%{opacity:1}80.02%{opacity:1}99.98%{opacity:1}100%{opacity:1}}

.index-DIY-clothstyle2-ul{
    li{
        display: inline-block;
        margin-left: 2px;
    }
    li:nth-of-type(n+4){
        margin-top: 5px;
    }
    li:nth-of-type(3n-2){
        margin-left: 10px;
    }
}

@keyframes jello-horizontal {
  0% {
       transform: scale3d(1, 1, 1);
  }
  30% {
      transform: scale3d(1.25, 0.75, 1);
  }
  40% {
      transform: scale3d(0.75, 1.25, 1);
  }
  50% {
      transform: scale3d(1.15, 0.85, 1);
  }
  65% {
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
            transform: scale3d(1, 1, 1);
  }
}

.index-DIY-clothstyle2{
    box-sizing: border-box;
    width: 192px;
    height: 224px;
    border: 1px solid #dee0e2;
    font-size: 15px;
    line-height: 15px;
    transition: 0.3s;
    .index-DIY-clothstyle2-pic{
        width: 190px;
        height: 173px;
    }
    .index-DIY-clothstyle2-text{
        p{
            margin-left: 10px;
        }
        p:first-of-type{
            font-weight: bold;
            color: #505b63;
            margin-top: 2px;
        }
        p~p{
            color: #99999a;
            margin-top: 10px;
        }
        
    }
}
.index-DIY-clothstyle2:hover{
    box-shadow:0 15px 30px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}
input.blackbutton{
    box-sizing: border-box;
    width: 83px;
    height: 20px;
    background: url(../../img/other/index-DIY-clothstyle2-button.png) 6px 3px  no-repeat black;
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 20px;
    padding-left: 14px;
    margin-top: 8px;
    margin-right: 10px;
}
input.blackbutton:hover{
    animation:jello-horizontal .9s both;
}


.head-link{
    height: 59px;
    border-bottom: 1px solid #dfdfdf;
    color: #5d666e;
    font-size: 14px;
    line-height: 59px;
    padding-left: 13.3%;
    a{
        color: #5d666e;
    }
    
}

//下一页
.shoplist-link{
//  width: 445px;
    height: 38px;
    position: relative;
    ul{
        position: absolute;
        top: 104%;
        right: 0;
     }
    li{
        text-align: center;
        display: inline-block;
        box-sizing: border-box;
        width: 38px;
        height: 38px;
        border: 1px #e7e7e7 solid;
        font-size: 10px;
        line-height: 36px;
        color: #444f58;
        margin-left: 5px;
        border-radius: 3px;
    }
    li.redColor{
        color: #e60012;
        border-color: #eb413d;
    }
    li:hover{
        color: #e60012;
        border-color: #eb413d;
    }
    .shoplist-point{
        display: inline-block;
        content: "";
        width: 2px;
        height: 2px;
        background: #444f58;
        border-radius: 50%;
    }
    li#shoplist-point{
        width: 23px;
        border: none;
    }
    li#shoplist-tiaozhi{
        width: 25px;
         border: none;
    }
    li.shoplist-ye{
        width: 68px;
    }
    input[type="number"]{
        width: 34px;
        height: 34px;
        border: none;
    }
}



//下拉框样式
.wrapper-dropdown-5 {
    /* Size & position */
    position: relative;
    width: 138px;
    height: 52px;
    font-size: 14px;
    line-height: 52px;
    padding-left: 30px;  /*菜单的边距*/

    /* Styles */
    background: #fff;
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.wrapper-dropdown-5:after { /* Little arrow */
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
   border-color: #4cbeff transparent;
}

.wrapper-dropdown-5 .dropdown {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Styles */
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

   /* Hiding */
    max-height: 0;
    overflow: hidden;
}

.wrapper-dropdown-5 .dropdown li {
    padding: 0 10px ;
}

.wrapper-dropdown-5 .dropdown li a {
   display: block;
    text-decoration: none;
    color: #333;
    padding: 10px 0;
    transition: all 0.3s ease-out;
    border-bottom: 1px solid #e6e8ea;
}

.wrapper-dropdown-5 .dropdown li:last-of-type a {
    border: none;
}

.wrapper-dropdown-5 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}

/* Hover state */

.wrapper-dropdown-5 .dropdown li:hover a {
   color: #57a9d9;
}

/* Active state */

.wrapper-dropdown-5.active {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.wrapper-dropdown-5.active:after {
    border-color: #82d1ff transparent;
}

.wrapper-dropdown-5.active .dropdown {
   border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}

